<template>
    <div class="toptab-warp">
        <div class="tab">
            <ul>
                <li v-for="(item,index) in data" @click="handle(index)" :key="index" :style="active == index ? Color : ''">
                    {{item.text}}
                </li>
            </ul>
        </div>
        <div class="tab-box" ref="box">
            <slot></slot>
        </div>
    </div>
</template>

<script>
export default {
    name: 'ToptabWarp',
    props: {
        data: {
            type: Array
        },
        currIndex: {
            type: Number,
            default: 0
        }
    },
    data() {
        return {
            active: 0
        }
    },
    watch: {
        active(newVal) {
            this.$emit('handle',newVal)
        }
    },
    methods: {
        handle(index) {
            this.active = index;
        }
    },
    computed: {
        Color() {
            return `border-bottom:2px solid ${this.$store.state.colorItem[this.$store.state.colorIndex].color};
                    margin-bottom:-1px;
                    color:${this.$store.state.colorItem[this.$store.state.colorIndex].color}`
        }
    },
    created() {
        const that = this
        this.active = this._props.currIndex;
        window.addEventListener('touchstart',function(e) {
            this.startX = e.changedTouches[0].pageX,
            this.startY = e.changedTouches[0].pageY;
            this.X = 0
            this.Y = 0
        })
        window.addEventListener('touchmove',function(e) {
            this.moveEndX = e.changedTouches[0].pageX,
            this.moveEndY = e.changedTouches[0].pageY,
            this.X = this.moveEndX - this.startX,
            this.Y = this.moveEndY - this.startY;
        })
        window.addEventListener('touchend',function() {
            if(this.X < -100) {
                that.active++
                if(that.active == that.data.length) {
                    that.active = 0
                }
            }
            if(this.X > 100) {
                that.active--
                if(that.active < 0) {
                    that.active = that.data.length - 1
                }
            }
        })
    },
    beforeRouteLeave (to, from, next) {
        window.removeEventListener('touchstart',function(){})
        window.removeEventListener('touchmove',function(){})
        window.removeEventListener('touchend',function(){})
        next()
    }
}
</script>

<style lang="scss" scoped>
.toptab-warp{
    position: fixed;
    z-index:1;
    top:0;
    left:0;
    width:100%;
    border-bottom:1px solid #eee;
    .tab{
        background:#fff;
        ul{
            background:#fff;
            list-style: none;
            font-size:0.32rem;
            display: flex;
            justify-content: space-around;
            li{
                list-style: none;
                height:0.7rem;
                color:#333;
                line-height:0.7rem;
                font-weight: 600;
            }
        }
    }
}
</style>